import { FC } from "react"
import styled from "styled-components"
import { Msg } from "."

interface BubbleItemProps {
  item: Msg
}

const BubbleItem: FC<BubbleItemProps> = ({ item }) => {
  return <Container left={`${item.left}px`}>
    {item.text}
  </Container>
}

export default BubbleItem

const Container = styled.div<{
  left: string
}>`
  background-color: #15184d;
  color: '#039dff';
  font-size: 12px;
  border: 1px solid #039dff;
  box-sizing: border-box;
  padding: 5px 21px;
  border-radius: 9px;
  display: inline-block;
  position: absolute;
  left: ${props => props.left};
  bottom: 0px;
  animation: move 9s ease-in-out forwards;
  @keyframes move {
        0%{
          transform: translateY(0);
          opacity: 0;
        }
        50%{
          opacity: .9;
        }
        100%{
          opacity: 0;
            transform: translateY(-160px);
        }
  }
`